import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, } from "react-router-dom";
import { Layout, Card, Skeleton, Row, Col, Statistic, Progress, Badge, List } from "antd";
import { Tabs, NoticeBar, NavBar, Icon } from 'antd-mobile';
import {
    getSchoolInformationBySchool,
    getSchoolSecurityDataAndRank,
} from "../js/api.js";
import '../css/wechatmobile.css';
import moment from 'moment';
import { CheckconditionDataForPatrolpush } from "../js/patrolpushapi.js";
import { InspectConditionDataForInpsectpush } from "../js/inspectpushapi.js";
const echarts = require('echarts');

class WeChatDepartmentRank extends Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        // var useragent = navigator.userAgent;
        // if (useragent.match(/MicroMessenger/i) != 'MicroMessenger' || navigator.userAgent.toLowerCase().indexOf('dingtalk') == -1) {
        //     window.location.href = "wxError.html";//若不是微信浏览器，跳转到温馨error页面
        // }
    }


    render() {
        return (
            <Router basename="wechatsecurityrank">
                <Layout style={{ backgroundColor: '#f5f5f5' }}>
                    <Content>
                        <Route path="/" component={WeChatDepartmentRankMain} />
                    </Content>
                </Layout>
            </Router>
        );
    }
}

class WeChatDepartmentRankMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            departmentId: this.getUrlParam("departmentId"),
            // departmentId: 4,
            date: moment().format('YYYY-MM-DD')
        };
    }

    componentDidMount() {
        // InspectConditionDataForInpsectpush(parseInt(this.state.departmentId), this.state.date, 'ri')
        // .then((res) => {
        //     //得到上半个页面的数据
        //     let flag = 0
        //     let tabs = [
        //         { title: '七日排名', sub: '1' },
        //         { title: '今日巡更', sub: '2' },
        //         { title: '本周巡检', sub: '3' },
        //       ];
        //     if(res.data.data.length!=0){
        //         flag = 1
        //         tabs = [
        //             { title: '七日排名', sub: '1' },
        //             { title: '今日巡更', sub: '2' },
        //             { title: '本周巡检', sub: '3' },
        //             { title: '今日巡检', sub: '4' },
        //           ];
        //     }
        //     this.setState({
        //         tabs:tabs,
        //         flag:flag
        //     });
        // })
        // .catch((e) => {
        //     if (e.response) {
        //         //请求已发出，服务器返回状态码不是2xx。
        //         console.info(e.response.data)
        //         console.info(e.response.status)
        //         console.info(e.response.headers)
        //     } else if (e.request) {
        //         // 请求已发出，但没有收到响应
        //         // e.request 在浏览器里是一个XMLHttpRequest实例，
        //         // 在node中是一个http.ClientRequest实例
        //         console.info(e.request)
        //     } else {
        //         //发送请求时异常，捕捉到错误
        //         console.info('error', e.message)
        //     }
        //     console.info(e.config)
        // });
    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {

        return (
            <div>
                {/* <Tabs tabs={this.state.tabs}
                initialPage={0}
                onChange={(tab, index) => { console.log('onChange', index, tab); }}
                onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            > */}

                <NavBar
                    mode="light"
                >部门排名</NavBar>
                <WeChatDepartmentData />

                {/* <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                <WeChatSecurityData />
            </div>
            <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                <SchoolPatrolpushMain />
            </div>
            <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                <WeekSchoolInspectpushMain />
            </div>
            {this.state.flag == 1?
            <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                <TodaySchoolInspectpushMain />
            </div>:<div></div>
            }
            </Tabs> */}
            </div>
        );
    }
}

class WeChatDepartmentData extends Component {
    constructor(props) {
        super(props);
        this.state = {
            confirmLoading: false,
            departmentId: this.getUrlParam("departmentId"),
            // departmentId: 832,
            chartData: [],
            avgchartData: [],
            maxchartData: [],
            educationId: -1,
            schoolLevel: '',
            schoolname: '',
            eduName: '',
            allschoolnum1: 0,
            // allschoolnum2: 0,
            comprehensivePointsRank1: 0,
            // comprehensivePointsRank2: 0,
            dangerNumRank1: 0,
            // dangerNumRank2: 0,
            patrolNumRank1: 0,
            // patrolNumRank2: 0,
            patrolRatesRank1: 0,
            // patrolRatesRank2: 0,
            inspectNumRank1: 0,
            // inspectNumRank2: 0,
            inspectRatesRank1: 0,
            // inspectRatesRank2: 0,
            lastweek: moment().subtract(7, 'days').format('YYYY-MM-DD'),
            yesterday: moment().subtract(1, 'days').format('YYYY-MM-DD'),
            chartsNum: 2,
            doneChartsNum: 0
        }

    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {

        this.setState({
            confirmLoading: true,
            doneChartsNum: 0,
        });

        getSchoolInformationBySchool(parseInt(this.state.departmentId))
            .then((res) => {
                this.setState({
                    educationId: res.data.educationId,
                    schoolLevel: res.data.schoolLevel,
                    schoolname: res.data.name,
                    eduName: res.data.eduName,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });
                getSchoolSecurityDataAndRank(this.state.educationId, this.state.schoolLevel, this.state.lastweek, this.state.yesterday, this.state.schoolname)
                    .then((res) => {
                        let avgchartData = [];
                        let maxchartData = [];
                        let chartData = [];
                            chartData.push(res.data.comprehensivePoints),
                            chartData.push(res.data.inspectNum),
                            chartData.push(res.data.dangerNum),
                            chartData.push(res.data.inspectRates),
                            avgchartData.push(res.data.avgComprehensivePoints),
                            avgchartData.push(res.data.avgInspectNum)
                            avgchartData.push(res.data.avgDangerNum),
                            avgchartData.push(res.data.avgInspectRates),
                            maxchartData.push(res.data.maxComprehensivePoints),
                            maxchartData.push(res.data.maxInspectNum)
                            maxchartData.push(res.data.maxDangerNum),
                            maxchartData.push(res.data.maxInspectRates),
                            this.setState({
                                allschoolnum1: res.data.schoolnum,
                                comprehensivePointsRank1: res.data.comprehensivePointsRank,
                                patrolNumRank1: res.data.patrolNumRank,
                                patrolRatesRank1: res.data.patrolRatesRank,
                                inspectNumRank1: res.data.inspectNumRank,
                                inspectRatesRank1: res.data.inspectRatesRank,
                                dangerNumRank1: res.data.dangerNumRank,
                                chartData: chartData,
                                avgchartData: avgchartData,
                                maxchartData: maxchartData,
                                doneChartsNum: this.state.doneChartsNum + 1,
                            });
                        console.log('doneChartsNum', this.state.doneChartsNum)
                        if (this.state.doneChartsNum == this.state.chartsNum) {
                            this.setState({
                                confirmLoading: false,
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });


                // getSchoolSecurityDataAndRank(-1, this.state.schoolLevel, this.state.lastweek, this.state.yesterday, this.state.schoolname)
                //     .then((res) => {
                //         this.setState({
                //             allschoolnum2: res.data.schoolnum,
                //             comprehensivePointsRank2: res.data.comprehensivePointsRank,
                //             patrolNumRank2: res.data.patrolNumRank,
                //             patrolRatesRank2: res.data.patrolRatesRank,
                //             inspectNumRank2: res.data.inspectNumRank,
                //             inspectRatesRank2: res.data.inspectRatesRank,
                //             dangerNumRank2: res.data.dangerNumRank,
                //             doneChartsNum: this.state.doneChartsNum + 1,
                //         });
                //         console.log('doneChartsNum', this.state.doneChartsNum)
                //         if (this.state.doneChartsNum == this.state.chartsNum) {
                //             this.setState({
                //                 confirmLoading: false,
                //             });
                //         }
                //     })
                //     .catch((e) => {
                //         if (e.response) {
                //             //请求已发出，服务器返回状态码不是2xx。
                //             console.info(e.response.data)
                //             console.info(e.response.status)
                //             console.info(e.response.headers)
                //         } else if (e.request) {
                //             // 请求已发出，但没有收到响应
                //             // e.request 在浏览器里是一个XMLHttpRequest实例，
                //             // 在node中是一个http.ClientRequest实例
                //             console.info(e.request)
                //         } else {
                //             //发送请求时异常，捕捉到错误
                //             console.info('error', e.message)
                //         }
                //         console.info(e.config)
                //     });
                // console.log('doneChartsNum', this.state.doneChartsNum)
                // if (this.state.doneChartsNum == this.state.chartsNum) {
                //     this.setState({
                //         confirmLoading: false,
                //     });
                // }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        return (
            <div>
                <Skeleton loading={this.state.confirmLoading} active>
                    <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }} mode="closable">
                        <span>
                            {(() => {
                                if (this.state.comprehensivePointsRank1 / this.state.allschoolnum1 < 0.3) {
                                    return ('贵部门近七天单位内排名前30%，请继续保持！')
                                } else if (this.state.comprehensivePointsRank1 / this.state.allschoolnum1 >= 0.3 && this.state.comprehensivePointsRank1 / this.state.allschoolnum1 < 0.7) {
                                    return ('贵部门近七天单位内排名居中，还要努力哦！')
                                } else {
                                    return ('贵部门近七天单位内排名后30%，要加把劲了！')
                                }
                            }
                            )()}
                        </span>
                        <img style={{ height: '18px', width: '18px', verticalAlign: 'middle' }} src={require("../img/加油.png")} />
                    </NoticeBar>
                    <div
                        className='conditionCard'
                        style={{ backgroundColor: '#ffffff', padding: 8, textAlign: 'center', boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}>
                        <span style={{ fontSize: 21, fontWeight: 'bloder', color: '#000' }}>贵部门近七天单位内综合排名</span>
                        {this.state.comprehensivePointsRank1 < 0.5 * this.state.allschoolnum1 ? <span style={{ fontSize: 21, fontWeight: 'bloder', color: 'green' }}>第{this.state.comprehensivePointsRank1}名</span> : <span style={{ fontSize: 21, fontWeight: 'bloder', color: 'red' }}>第{this.state.comprehensivePointsRank2}名</span>}
                        <h4 align="center" style={{ marginTop: 10 }}>统计时段：{this.state.lastweek}~{this.state.yesterday}</h4>
                    </div>

                    <div
                        className='conditionCard'
                        style={{
                            marginTop: 12,
                            padding: 8,
                            height: 350,
                            backgroundColor: '#ffffff',
                            boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)'
                        }}>
                        <ChartDepartmentData
                            that={this}
                            chartData={this.state.chartData}
                            avgchartData={this.state.avgchartData}
                            maxchartData={this.state.maxchartData} />
                    </div>
                    {/* <div
                        className='conditionCard'
                        style={{ backgroundColor: '#ffffff', textAlign:'center', padding:8, boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)'}}>
                            <h2 align="center">全市{this.state.schoolLevel}排名（共{this.state.allschoolnum2}所）</h2>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="综合积分" value={'第'+this.state.comprehensivePointsRank2+'名'}
                                    valueStyle={this.state.comprehensivePointsRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                                <Col span={12}>
                                    <Statistic title="隐患处理个数" value={'第'+this.state.dangerNumRank2+'名'} 
                                    valueStyle={this.state.dangerNumRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="巡更次数" value={'第'+this.state.patrolNumRank2+'名'} 
                                    valueStyle={this.state.patrolNumRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                                <Col span={12}>
                                    <Statistic title="巡更完成率" value={'第'+this.state.patrolRatesRank2+'名'} 
                                    valueStyle={this.state.patrolRatesRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="巡检次数" value={'第'+this.state.inspectNumRank2+'名'} 
                                    valueStyle={this.state.inspectNumRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                                <Col span={12}>
                                    <Statistic title="巡检完成率" value={'第'+this.state.inspectRatesRank2+'名'} 
                                    valueStyle={this.state.inspectRatesRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row>
                            <div>
                                <span style={{color:'green'}}>绿色</span><span>表示排名前50%，</span><span style={{color:'red'}}>红色</span><span>表示排名后50%</span>
                            </div>
                    </div> */}
                    <div
                        className='conditionCard'
                        style={{ backgroundColor: '#ffffff', textAlign: 'center', padding: 8, boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}>
                        <h2 align="center">单位内部门排名（共{this.state.allschoolnum1}个）</h2>
                        <Row gutter={16}>
                            <Col span={12}>
                                <Statistic title="综合积分" value={'第' + this.state.comprehensivePointsRank1 + '名'}
                                    valueStyle={this.state.comprehensivePointsRank1 < this.state.allschoolnum1 / 2 ? { color: 'green', marginBottom: 10 } : { color: 'red', marginBottom: 10 }} />
                            </Col>
                            <Col span={12}>
                                <Statistic title="隐患处理个数" value={'第' + this.state.dangerNumRank1 + '名'}
                                    valueStyle={this.state.dangerNumRank1 < this.state.allschoolnum1 / 2 ? { color: 'green', marginBottom: 10 } : { color: 'red', marginBottom: 10 }} />
                            </Col>
                        </Row>
                        {/* <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="巡更次数" value={'第'+this.state.patrolNumRank1+'名'} 
                                    valueStyle={this.state.patrolNumRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                                <Col span={12}>
                                    <Statistic title="巡更完成率" value={'第'+this.state.patrolRatesRank1+'名'} 
                                    valueStyle={this.state.patrolRatesRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row> */}
                        <Row gutter={16}>
                            <Col span={12}>
                                <Statistic title="巡检次数" value={'第' + this.state.inspectNumRank1 + '名'}
                                    valueStyle={this.state.inspectNumRank1 < this.state.allschoolnum1 / 2 ? { color: 'green', marginBottom: 10 } : { color: 'red', marginBottom: 10 }} />
                            </Col>
                            <Col span={12}>
                                <Statistic title="巡检完成率" value={'第' + this.state.inspectRatesRank1 + '名'}
                                    valueStyle={this.state.inspectRatesRank1 < this.state.allschoolnum1 / 2 ? { color: 'green', marginBottom: 10 } : { color: 'red', marginBottom: 10 }} />
                            </Col>
                        </Row>
                        <div>
                            <span style={{ color: 'green' }}>绿色</span><span>表示排名前50%，</span><span style={{ color: 'red' }}>红色</span><span>表示排名后50%</span>
                        </div>
                    </div>
                    <div style={{ textAlign: 'center', marginTop: 15 }}>
                        <span>具体部门积分排名情况请登录管理后台查看</span>
                    </div>
                </Skeleton>
            </div>
        )

    }
}

class ChartDepartmentData extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            avgchartData: props.avgchartData,
            maxchartData: props.maxchartData,
            that: props.that,
        };
    }

    componentWillReceiveProps(props) {
        this.setState({
            chartData: props.chartData,
            avgchartData: props.avgchartData,
            maxchartData: props.maxchartData,
            that: props.that,
        }, () => {
            this.drawChart();
        })
    }

    componentDidMount() {
        this.drawChart();
    }


    drawChart() {

        let that = this

        let chart = echarts.init(document.getElementById('chartSecurityRank'));

        let color = {
            linearYtoG: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#3366ff",
                },
                {
                  offset: 1,
                  color: "#9966ff",
                },
              ],
            },
            linearGtoB: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#3333ff",
                },
                {
                  offset: 1,
                  color: "#009999",
                },
              ],
            },
            linearBtoG: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#cc0033",
                },
                {
                  offset: 1,
                  color: "#FF83FA",
                },
              ],
            },
          };

        let option = {
            backgroundColor: "rgb(255,255,255,1)",
            title: [{
                text: '校园安全工作指数',
                left: 'center',
                textStyle: { color: 'rgba(0, 0, 0, 1)', fontSize: 21, fontWeight: 'normal' },
            }],
            tooltip: {
                trigger: "item",
              },
            legend: {
                orient: 'horizontal',
                icon: 'circle', //图例形状
                data: ['本部门', '单位平均'],
                bottom: 'top',
                right: 'center',
                itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
                itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
                itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                textStyle: {
                    fontSize: 14,
                },
            },

            radar: {
                radius: "58%", //大小
                nameGap: 10, // 图中工艺等字距离图的距离
                center: ["50%", "50%"], // 图的位置
                name: {
                    textStyle: {
                        color: "#333",
                        fontSize: 13
                    },
                },
                splitNumber: 8,
                axisLine: {
                  lineStyle: {
                    color: color.linearYtoG,
                    opacity: 0.6,
                  },
                },
                splitLine: {
                  lineStyle: {
                    color: color.linearYtoG,
                    opacity: 0.6,
                  },
                },
                splitArea: {
                  areaStyle: {
                    color: "#fff",
                    opacity: 0.1,
                    shadowBlur: 25,
                    shadowColor: "#000",
                    shadowOffsetX: 0,
                    shadowOffsetY: 5,
                  },
                },
                indicator: [
                    { name: '综合积分/分', max: this.state.maxchartData[0] },
                    { name: '巡检次数/次', max: this.state.maxchartData[1] },
                    { name: '隐患处理个数/个', max: this.state.maxchartData[2] },
                    { name: '巡检完成率/%', max: this.state.maxchartData[3] }
                ],
              },
              grid: {
                left: 90,
                right: 80,
                bottom: 40,
                top: "60%",
              },
              series: [
                {
                  type: "radar",
                  data: [
                    {
                          value: this.state.chartData,
                          name: "本部门",
                          itemStyle: {
                            normal: {
                              color: "#3333ff",
                            },
                          },
                          lineStyle: {
                            normal: {
                              opacity: 0,
                            },
                          },
                          areaStyle: {
                            normal: {
                              color: color.linearGtoB,
                              shadowBlur: 15,
                              shadowColor: "rgba(0,0,0,.2)",
                              shadowOffsetX: 0,
                              shadowOffsetY: 5,
                              opacity: 0.5,
                            },
                          },
                        },
                    {
                      value: this.state.avgchartData,
                      name: "单位平均",
                      itemStyle: {
                        normal: {
                          color: "#cc0033",
                        },
                      },
                      lineStyle: {
                        normal: {
                          opacity: 0,
                        },
                      },
                      areaStyle: {
                        normal: {
                          color: color.linearBtoG,
                          shadowBlur: 15,
                          shadowColor: "rgba(0,0,0,.2)",
                          shadowOffsetX: 0,
                          shadowOffsetY: 5,
                          opacity: 0.5,
                        },
                      },
                    },
                  ],
                },
              ],
        }

        chart.setOption(option)
        window.onresize = chart.resize;
    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (

            <div id='chartSecurityRank' style={chartStyle} />
        )
    }
}

const { Content, Sider } = Layout;

// class SchoolPatrolpushMain extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             data: [],
//             schoolId: 0,
//             should: 0,
//             done: 0,

//             confirmLoading: false,
//         };
//     }

//     componentDidMount() {
//         this.refreshData();
//     }

//     refreshData() {
//         this.setState({
//             confirmLoading: true,
//         });

//         let schoolId = this.getUrlParam("departmentId");
//         // let schoolId = 348;
//         let date = moment().format('YYYY-MM-DD');

//         this.setState({
//             schoolId: schoolId,
//             date: date,
//         });

//         CheckconditionDataForPatrolpush(schoolId, date)
//             .then((res2) => {
//                 //得到整个页面的数据
//                 let dataTemp = []
//                 res2.data.data.forEach((item, index) => {
//                     let temp = {
//                         timePeriod: item.createTime,
//                         people: item.realName,
//                         routeDoneNum: item.routeDoneNum,
//                         symbol: item.symbol,
//                         routeRightNum: item.routeRightNum,
//                         routeName:item.routeName,
//                         routeNameId:item.routeNameId,
//                         routeNum:item.routeNum
//                     };
//                     dataTemp.push(temp);
//                 });
//                 //console.log(dataTemp);
//                 let percent = ((res2.data.done > res2.data.should ? (res2.data.should) : (res2.data.done)) / res2.data.should * 100).toFixed(2);
//                 if (percent == 100) {
//                     percent = Number(percent).toFixed(0);
//                 }

//                 this.setState({
//                     data: dataTemp.reverse(),
//                     routeNum: res2.data.routeNum,
//                     should: res2.data.should,
//                     done: res2.data.done,
//                     percent: percent,
//                     schoolId: res2.data.schoolId,

//                     confirmLoading: false,
//                 });
//             })
//             .catch((e) => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data)
//                     console.info(e.response.status)
//                     console.info(e.response.headers)
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request)
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info('error', e.message)
//                 }
//                 console.info(e.config)
//             });

//     }

//     getUrlParam(name) {
//         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
//         var r = window.location.search.substr(1).match(reg);  //匹配目标参数
//         if (r != null) return unescape(r[2]);
//         return null; //返回参数值
//     }

//     render() {
//         //console.log(percent);
//         let cards = this.state.data.map((d, index) => {
//             console.log(d.routeRightNum);
//             let normative = (d.routeRightNum / d.routeNum * 100).toFixed(2); //打卡规范性(准确率)
//             if (normative == 100) {
//                 normative = Number(normative).toFixed(0);
//             }
//             // ((d.routeDoneNum > 23 ? 23 : d.routeDoneNum) / this.state.routeNum * 100).toFixed(2);
//             let completionRate = (( d.routeDoneNum / d.routeNum ) * 100).toFixed(2);
//             if (completionRate == 100) {
//                 completionRate = Number(completionRate).toFixed(0);
//             }

//             let data = [{
//                 title: '巡更路线',
//                 description: (<div style={{ color: '#000000' }}>{d.routeName}</div>)
//             }, {
//                 title: '巡更人员',
//                 description: (<div style={{ color: '#000000' }}>{d.people}</div>)
//             }, {
//                 title: '巡更点位',
//                 description: (<div style={{ color: '#000000' }}>{d.routeNum + '个'}</div>)
//             }, {
//                 title: '实际巡更',
//                 description: (<div style={{ color: '#000000' }}>{d.routeDoneNum + '个'}</div>)
//             },
//             {
//                 title: '完成率',
//                 description: (<div style={{ color: '#000000' }}>{completionRate + '%'}</div>)
//             }];

//             return (
//                 <Link
//                     style={{ textDecoration: 'none' }}
//                     to={{
//                         pathname: '/detail',
//                         state: {
//                             symbol: d.symbol,
//                             schoolId: this.state.schoolId,
//                             routeNameId:d.routeNameId,
//                             completionRate:completionRate
//                         }
//                     }}>
//                     <Card
//                         key={index}
//                         title={d.timePeriod}
//                         // extra={'详情 >'}
//                         className='conditionCard'
//                         style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
//                         bodyStyle={{
//                             padding: '10px 24px',
//                         }}>
//                         <Layout>
//                             <Content style={{ background: '#fff' }}>
//                                 <List
//                                     itemLayout="horizontal"
//                                     style={{ marginRight: 25 }}
//                                     size="small"
//                                     bordered={false}
//                                     split={false}
//                                     dataSource={data}
//                                     renderItem={item => (
//                                         <List.Item>
//                                             <Row
//                                                 type="flex"
//                                                 justify="space-between"
//                                                 style={{
//                                                     width: "100%"
//                                                 }}>
//                                                 <Col span={8} xs={10}>
//                                                     {item.title}
//                                                 </Col>
//                                                 <Col
//                                                     // style={{ textAlign: "end" }}
//                                                     span={16} xs={14}>
//                                                     {item.description}
//                                                 </Col>
//                                             </Row>
//                                         </List.Item>
//                                     )}
//                                 />
//                             </Content>
//                             <Sider width={'25%'} style={{ background: '#fff' }}>
//                                 <Progress
//                                     className='progress-center'
//                                     style={{
//                                         fontSize: '12px'
//                                     }}
//                                     size='small'
//                                     type="circle"
//                                     percent={normative}
//                                     width={85}
//                                     strokeWidth={8}
//                                     format={percent => `准确率${percent}%`}
//                                 />
//                             </Sider>
//                         </Layout>
//                     </Card>
//                 </Link>
//             )
//         });


//         return (
//             <div style={{ paddingBottom: '10px' }}>
//                 <Skeleton loading={this.state.confirmLoading} active>
//                     <div
//                         className='conditionCard'
//                         style={{
//                             boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)',
//                             textAlign: 'center',
//                             padding: '12px 24px',
//                             background: '#ffffff',
//                         }}>
//                         <div>
//                             日期：
//                             {this.state.date}
//                         </div>
//                         <div>
//                             <Progress
//                                 type="circle"
//                                 percent={this.state.percent}
//                                 width={150}
//                                 strokeWidth={8}
//                                 style={{ marginTop: '10px', fontSize: '28px' }}
//                                 format={percent => `完成率${percent}%`}
//                             />
//                         </div>
//                         <div>
//                             <Row style={{ marginTop: '10px', }}>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="success"
//                                         text={"已巡计划：" + this.state.done + "个"} />
//                                 </Col>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="error"
//                                         text={"未巡计划：" + (this.state.should - this.state.done) + "个"} />
//                                 </Col>
//                             </Row>
//                         </div>
//                     </div>
//                     <div style={{
//                         width: '100%',
//                         marginTop: '10px',
//                     }}>
//                         {cards}
//                     </div>
//                 </Skeleton>
//             </div>
//         )
//     }

// }

// class TodaySchoolInspectpushMain extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             classData: [],
//             schoolId: undefined,
//             date: undefined,
//             confirmLoading: false,
//         };
//     }

//     componentDidMount() {
//         this.refreshData();
//     }

//     refreshData() { //date与schoolId
//         this.setState({
//             confirmLoading: true,
//         });

//         let schoolId = this.getUrlParam("departmentId");
//         // let schoolId = 383;
//         let date = moment().format('YYYY-MM-DD');

//         this.setState({
//             schoolId: schoolId,
//             date: date
//         });

//         InspectConditionDataForInpsectpush(schoolId, date, 'ri')
//             .then((res) => {
//                 //得到上半个页面的数据
//                 let classData = [];
//                 res.data.data.forEach((item, index) => {
//                     classData.push({
//                         key: index + 1,
//                         teamId: parseInt(item.classId),
//                         teamName: '今日巡检 ' + item.className,
//                         teamMates: item.classMates,
//                         should: parseInt(item.should), //应巡计划数量
//                         real: parseInt(item.real), //完成计划数量
//                         abnormal: parseInt(item.abnormal), //发现异常项目数
//                     });
//                 });
//                 this.setState({
//                     classData: classData,
//                     should: res.data.shouldAllClass, //应巡计划数量
//                     real: res.data.realAllClass, //实巡计划数量
//                     abnormal: res.data.abnormalAllClass, //异常项目数量
//                     done: res.data.doneAllClass, //完成项目数
//                     all: res.data.allAllClass, //总项目数
//                     confirmLoading: false,
//                 });
//             })
//             .catch((e) => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data)
//                     console.info(e.response.status)
//                     console.info(e.response.headers)
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request)
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info('error', e.message)
//                 }
//                 console.info(e.config)
//             });
//     }

//     getUrlParam(name) {
//         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
//         var r = window.location.search.substr(1).match(reg);  //匹配目标参数
//         if (r != null) return unescape(r[2]);
//         return null; //返回参数值
//     }

//     render() {
//         let cards = this.state.classData.map((d, index) => {
//             let completionRate = (d.real / d.should * 100).toFixed(2);
//             if (completionRate == 100) {
//                 completionRate = Number(completionRate).toFixed(0);
//             }
//             let data = [{
//                 title: '班组成员',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.teamMates}</div>
//                 )
//             }, {
//                 title: '应巡计划',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.should}</div>
//                 )
//             }, {
//                 title: '实际完成',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.real}</div>
//                 )
//             }, {
//                 title: '发现异常',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.abnormal}</div>
//                 )
//             }];

//             return (
//                 <Link
//                     style={{ textDecoration: 'none' }}
//                     to={{
//                         pathname: '/classinspect',
//                         state: {
//                             schoolId: this.state.schoolId,
//                             teamId: d.teamId,
//                             teamName: d.teamName,
//                             teamMates: d.teamMates,
//                             should: d.should,
//                             real: d.real,
//                             abnormal: d.abnormal,
//                         }
//                     }}>
//                     <Card
//                         key={index}
//                         title={d.teamName}
//                         // extra={'详情 >'}
//                         className='conditionCard'
//                         style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
//                         bodyStyle={{
//                             padding: '10px 24px',
//                         }}>
//                         <Layout>
//                             <Content style={{ background: '#fff' }}>
//                                 <List
//                                     itemLayout="horizontal"
//                                     style={{ marginRight: 25 }}
//                                     size="small"
//                                     bordered={false}
//                                     split={false}
//                                     dataSource={data}
//                                     renderItem={item => (
//                                         <List.Item>
//                                             <Row
//                                                 type="flex"
//                                                 justify="space-between"
//                                                 style={{
//                                                     width: "100%"
//                                                 }}>
//                                                 <Col span={8} xs={10}>
//                                                     {item.title}
//                                                 </Col>
//                                                 <Col
//                                                     style={{ textAlign: "end" }}
//                                                     span={16} xs={14}>
//                                                     {item.description}
//                                                 </Col>
//                                             </Row>
//                                         </List.Item>
//                                     )}
//                                 />
//                             </Content>
//                             <Sider width={'25%'} style={{ background: '#fff' }}>
//                                 <Progress
//                                     className='progress-center'
//                                     style={{
//                                         fontSize: '12px',
//                                     }}
//                                     size='small'
//                                     type="circle"
//                                     percent={completionRate}
//                                     width={85}
//                                     strokeWidth={8}
//                                     format={percent => `完成率${percent}%`}
//                                 />
//                             </Sider>
//                         </Layout>
//                     </Card>
//                 </Link>
//             )
//         });
//         let percent
//         if(this.state.should != 0){
//             percent = (this.state.real / this.state.should * 100).toFixed(2);
//         }else{
//             percent = '00.00'
//         }
//         console.log("percent", percent)
//         if (percent == 100) {
//             percent = Number(percent).toFixed(0);
//         }

//         return (
//             <div style={{ paddingBottom: '10px' }}>
//                 <Skeleton loading={this.state.confirmLoading} active>
//                     <div
//                         className='conditionCard'
//                         style={{
//                             boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)', 
//                             textAlign: 'center',
//                             padding: '12px 24px',
//                             background: '#ffffff',
//                         }}>
//                         <div>
//                             日期：
//                                 {moment().format('YYYY-MM-DD')}
//                         </div>
//                         <div>
//                             <Progress
//                                 type="circle"
//                                 percent={percent}
//                                 width={150}
//                                 strokeWidth={8}
//                                 style={{ marginTop: '10px', fontSize: '28px' }}
//                                 format={percent => `完成率${percent}%`}
//                             />
//                         </div>

//                         <div>
//                             <Row style={{ marginTop: '10px', }}>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="processing"
//                                         text={"应巡计划：" + this.state.should + "个"} />
//                                 </Col>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="success"
//                                         text={"实际完成：" + this.state.real + "个"} />
//                                 </Col>
//                                 <Col span={24}>
//                                     <Badge
//                                         status="warning"
//                                         text={"巡检项目数/已完成数/发现隐患数：" +
//                                             this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
//                                 </Col>
//                             </Row>
//                         </div>
//                     </div>
//                     <div style={{
//                         width: '100%',
//                         marginTop: '10px',
//                     }}>
//                         {cards}
//                     </div>
//                 </Skeleton>
//             </div>
//         )
//     }
// }

// class WeekSchoolInspectpushMain extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             classData: [],
//             schoolId: undefined,
//             date: undefined,
//             confirmLoading: false,
//         };
//     }

//     componentDidMount() {
//         this.refreshData();
//     }

//     refreshData() { //date与schoolId
//         this.setState({
//             confirmLoading: true,
//         });

//         let schoolId = this.getUrlParam("departmentId");
//         // let schoolId =4 ;
//         let date = moment().week(moment().week()).startOf('week').add(5, "days").format('YYYY-MM-DD');

//         this.setState({
//             schoolId: schoolId,
//             date: date,
//         });

//         InspectConditionDataForInpsectpush(schoolId, date, 'zhou')
//             .then((res) => {
//                 //得到上半个页面的数据
//                 let classData = [];
//                 res.data.data.forEach((item, index) => {
//                     classData.push({
//                         key: index + 1,
//                         teamId: parseInt(item.classId),
//                         teamName: '本周巡检 ' + item.className,
//                         teamMates: item.classMates,
//                         should: parseInt(item.should), //应巡计划数量
//                         real: parseInt(item.real), //完成计划数量
//                         abnormal: parseInt(item.abnormal), //发现异常项目数
//                     });
//                 });
//                 this.setState({
//                     classData: classData,
//                     should: res.data.shouldAllClass, //应巡计划数量
//                     real: res.data.realAllClass, //实巡计划数量
//                     abnormal: res.data.abnormalAllClass, //异常项目数量
//                     done: res.data.doneAllClass, //完成项目数
//                     all: res.data.allAllClass, //总项目数
//                     confirmLoading: false,
//                 });
//             })
//             .catch((e) => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data)
//                     console.info(e.response.status)
//                     console.info(e.response.headers)
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request)
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info('error', e.message)
//                 }
//                 console.info(e.config)
//             });
//     }

//     getUrlParam(name) {
//         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
//         var r = window.location.search.substr(1).match(reg);  //匹配目标参数
//         if (r != null) return unescape(r[2]);
//         return null; //返回参数值
//     }

//     render() {
//         let cards = this.state.classData.map((d, index) => {
//             let completionRate = (d.real / d.should * 100).toFixed(2);
//             if (completionRate == 100) {
//                 completionRate = Number(completionRate).toFixed(0);
//             }
//             let data = [{
//                 title: '班组成员',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.teamMates}</div>
//                 )
//             }, {
//                 title: '应巡计划',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.should}</div>
//                 )
//             }, {
//                 title: '实际完成',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.real}</div>
//                 )
//             }, {
//                 title: '发现异常',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.abnormal}</div>
//                 )
//             }];

//             return (
//                 <Link
//                     style={{ textDecoration: 'none' }}
//                     to={{
//                         pathname: '/classinspect',
//                         state: {
//                             schoolId: this.state.schoolId,
//                             teamId: d.teamId,
//                             teamName: d.teamName,
//                             teamMates: d.teamMates,
//                             should: d.should,
//                             real: d.real,
//                             abnormal: d.abnormal,
//                         }
//                     }}>
//                     <Card
//                         key={index}
//                         title={d.teamName}
//                         // extra={'详情 >'}
//                         className='conditionCard'
//                         style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
//                         bodyStyle={{
//                             padding: '10px 24px',
//                         }}>
//                         <Layout>
//                             <Content style={{ background: '#fff' }}>
//                                 <List
//                                     itemLayout="horizontal"
//                                     style={{ marginRight: 25 }}
//                                     size="small"
//                                     bordered={false}
//                                     split={false}
//                                     dataSource={data}
//                                     renderItem={item => (
//                                         <List.Item>
//                                             <Row
//                                                 type="flex"
//                                                 justify="space-between"
//                                                 style={{
//                                                     width: "100%"
//                                                 }}>
//                                                 <Col span={8} xs={10}>
//                                                     {item.title}
//                                                 </Col>
//                                                 <Col
//                                                     style={{ textAlign: "end" }}
//                                                     span={16} xs={14}>
//                                                     {item.description}
//                                                 </Col>
//                                             </Row>
//                                         </List.Item>
//                                     )}
//                                 />
//                             </Content>
//                             <Sider width={'25%'} style={{ background: '#fff' }}>
//                                 <Progress
//                                     className='progress-center'
//                                     style={{
//                                         fontSize: '12px',
//                                     }}
//                                     size='small'
//                                     type="circle"
//                                     percent={completionRate}
//                                     width={85}
//                                     strokeWidth={8}
//                                     format={percent => `完成率${percent}%`}
//                                 />
//                             </Sider>
//                         </Layout>
//                     </Card>
//                 </Link>
//             )
//         });
//         let percent
//         if(this.state.should != 0){
//             percent = (this.state.real / this.state.should * 100).toFixed(2);
//         }else{
//             percent = '00.00'
//         }
//         console.log("percent", percent)
//         if (percent == 100) {
//             percent = Number(percent).toFixed(0);
//         }

//         return (
//             <div style={{ paddingBottom: '10px' }}>
//                 <Skeleton loading={this.state.confirmLoading} active>
//                     <div
//                         className='conditionCard'
//                         style={{
//                             boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)', 
//                             textAlign: 'center',
//                             padding: '12px 24px',
//                             background: '#ffffff',
//                         }}>
//                         <div>
//                             日期时段：
//                                 {(moment().week(moment().week()).startOf('week').add(1, "days").format('YYYY-MM-DD') + " ~ " + moment().format('YYYY-MM-DD'))}
//                         </div>
//                         <div>
//                             <Progress
//                                 type="circle"
//                                 percent={percent}
//                                 width={150}
//                                 strokeWidth={8}
//                                 style={{ marginTop: '10px', fontSize: '28px' }}
//                                 format={percent => `完成率${percent}%`}
//                             />
//                         </div>

//                         <div>
//                             <Row style={{ marginTop: '10px', }}>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="processing"
//                                         text={"应巡计划：" + this.state.should + "个"} />
//                                 </Col>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="success"
//                                         text={"实际完成：" + this.state.real + "个"} />
//                                 </Col>
//                                 <Col span={24}>
//                                     <Badge
//                                         status="warning"
//                                         text={"巡检项目数/已完成数/发现隐患数：" +
//                                             this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
//                                 </Col>
//                             </Row>
//                         </div>
//                     </div>
//                     <div style={{
//                         width: '100%',
//                         marginTop: '10px',
//                     }}>
//                         {cards}
//                     </div>
//                 </Skeleton>
//             </div>
//         )
//     }
// }
export default WeChatDepartmentRank;